<template>
	<div class="update-window">
		<div v-if="!updateError" class="update">
			<div class="update-title">{{ updateMessage }}</div>
			<a-progress :stroke-width="8" :percentage="percentage">
				<p>正在更新，已完成{{ percentage }}%</p>
			</a-progress>
		</div>
		<div v-else class="update-error">
			<div class="update-title">更新失败</div>
			<p class="error-tips">点击重试，或前往官网下载最新安装包</p>
			<div class="button-group">
				<a-button @click="retry">重试</a-button>
				<a-button >前往官网</a-button>
				<a-button @click="cancel">取消</a-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { message, notification } from "ant-design-vue";

import { ipcRendererOn } from "@/utils/ipcRenderer";
import { onBeforeMount, ref } from "vue";

const updateError = ref(false);
const updateMessage = ref("版本更新中...");
const percentage = ref(0);
onBeforeMount(() => {
	ipcRendererOn("download-progress", (event, ...args) => {
		console.log('args1',args)
		percentage.value = args[0].percent;
	});
	ipcRendererOn("update-downloaded", (event, ...args) => {
		console.log(args);
		updateMessage.value = args[0].message;
		percentage.value = 100;
	});
	ipcRendererOn("update-finish", (event, ...args) => {
		updateMessage.value = args[0].message;
	});
	ipcRendererOn("error", (event, ...args) => {
		console.log(args);
		updateError.value = true;
	});
	window.addEventListener("offline", () => {
		updateError.value = true;
	});
});

const cancel = () => {
	ipcRenderer.send("quit");
};
const retry = () => {
	if (!navigator.onLine) {
		message.warning("网络未连接，请检查网络后重试", 3);
	} else {
		updateError.value = false;
		ipcRenderer.send("checkUpdateNow");
	}
};
</script>

<style lang="less">
.update-window {
	// box-sizing: border-box;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content:center;
	background:var(--background);
	background-size: 100% 100%;
	.update-title {
		height: 44px;
		color: @textColor;
		font-size: @lFont;
		border-bottom: 1px solid #ccc;
	}
	.update {
		width: 100%;
		.a-progress {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			:deep(.a-progress-bar) {
				width: 380px;
			}
			:deep(.a-progress__text) {
				margin-left: 0;
				p {
					font-size: @sFont;
				}
			}
		}
	}
	.update-error {
		.error-tips {
			margin: 30px auto;
			font-size: @sFont;
			text-align: center;
		}
		.button-group {
			display: flex;
			justify-content: space-around;
			width: 325px;
			margin: 0 auto;
		}
	}
}

.update-message {
	margin-bottom: 10px;
	font-size: @lFont;
	text-align: center;
}
</style>
